<template>
    <d2-container :class="{'page-compact':crud.pageOptions.compact}">
        <d2-crud-x
                ref="d2Crud"
                v-bind="_crudProps"
                v-on="_crudListeners"
        @caseTest="caseTest"
        @showResult="showResult">

            <div slot="header">
              <crud-search ref="search" :options="crud.searchOptions" @submit="handleSearch" >
              <template slot="suffix">
            <el-dropdown>
              <el-button type="warning" size="small">
                请选择环境<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(item, index) in evn_list" :key="index" @click.native="handleitemClick(item)">{{item.env_name}}</el-dropdown-item>
<!--                <el-dropdown-item>线上环境</el-dropdown-item>-->
<!--                <el-dropdown-item>螺蛳粉</el-dropdown-item>-->
<!--                <el-dropdown-item>双皮奶</el-dropdown-item>-->
<!--                <el-dropdown-item>蚵仔煎</el-dropdown-item>-->
              </el-dropdown-menu>
            </el-dropdown>
            <el-tag style="margin-left:10px">{{select_env}}</el-tag>
          </template>
                </crud-search>

                <el-button size="small" type="primary" @click="addRow"><i class="el-icon-plus"/> 新增</el-button>
                <el-button size="small" type="danger" @click="batchDelete" :disabled="!multipleSelection || multipleSelection.length===0"><i class="el-icon-delete"></i> 批量删除</el-button>
                <crud-toolbar v-bind="_crudToolbarProps" v-on="_crudToolbarListeners"/>
            </div>
            <span slot="PaginationPrefixSlot" class="prefix" >
                <el-button class="square" size="mini" title="批量删除"
                           @click="batchDelete" icon="el-icon-delete" :disabled="!multipleSelection || multipleSelection.length===0"  />
            </span>

    <template slot="cronSlot" slot-scope="scope">
        <el-tag size="mini">{{scope.row['cron']?scope.row['cron']:'无'}}</el-tag>
      </template>

        </d2-crud-x>

        <el-drawer
        title="测试结果"
        :visible.sync="resultShow"
        direction="rtl"
        size="70%">
        <div>
          <api-result :case-object=caseObject></api-result>
        </div>
      </el-drawer>
    </d2-container>
</template>

<script>
import { crudOptions } from './crud'
import { d2CrudPlus } from 'd2-crud-plus'
import * as api from './api'
import ApiResult from '@/views/api_result'
import * as evn_api from '@/views/api_envinfo/api'
import { install } from '@/views/plugins/timingTask/component'
import Vue from 'vue'

export default {
  name: 'api_testcase',
  mixins: [d2CrudPlus.crud],
  components: { ApiResult },
  data () {
    return {
      resultShow: false,
      caseObject: null,
      evn_list: [],
      select_env: '没有选择环境',
      select_obj: undefined
    }
  },
  created () {
    install(Vue)
  },
  mounted () {
    this.evn_init()
  },
  methods: {
    evn_init () {
      evn_api.GetList().then((ret) => {
        console.log(ret)
        this.evn_list = ret.data.data
        console.log('mounted evn_api ---------------')
        for (let i = 0; i < this.evn_list.length; i++) {
          const env_item = this.evn_list[i]
          console.log(env_item)
          if (env_item.default === true) {
            this.select_env = env_item.env_name
            this.select_obj = env_item
          }
        }
      })
    },
    getCrudOptions () {
      return crudOptions(this)
    },
    pageRequest (query) {
      return api.GetList(query)
    },
    addRequest (row) {
      console.log(row)
      if (row.cron !== undefined) {
        if (this.select_obj === undefined) {
          this.$message({
            type: 'error',
            message: '没有选择环境'
          })
          return
        }
        row.env = this.select_obj
      }
      return api.AddObj(row)
    },
    updateRequest (row) {
      if (row.cron !== undefined) {
        if (this.select_obj === undefined) {
          this.$message({
            type: 'error',
            message: '没有选择环境'
          })
          return
        }
        row.env = this.select_obj
      }
      return api.UpdateObj(row)
    },
    delRequest (row) {
      return api.DelObj(row.id)
    },
    batchDelRequest (ids) {
      return api.BatchDel(ids)
    },
    infoRequest (row) {
      return api.GetObj(row.id)
    },
    caseTest ({ row }) {
      if (this.select_obj === undefined) {
        this.$message({
          type: 'error',
          message: '没有选择环境'
        })
        return
      }
      row.env = this.select_obj
      api.caseTest(row).then((ret) => {
        this.$message({
          type: 'success',
          message: ret.msg
        })
      }).finally(() => {
        this.doRefresh()
      })
    },
    showResult ({ row }) {
      this.resultShow = true
      console.log(row)
      this.caseObject = row
    },
    handleitemClick (item) {
      this.select_env = item.env_name
      this.select_obj = item
    }
  }
}
</script>
